<template>
  <div class="layout default">
    <AppHeader>
      <template #header>
        <div>默认layout页头</div>
      </template>
    </AppHeader>

    <main class="layout-content">
      <slot></slot>
    </main>

    <AppFooter>
      <template #footer>
        <div>默认layout页脚</div>
      </template>
    </AppFooter>
  </div>
</template>

<style lang="scss">
html,
body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
}

#__nuxt {
  width: 100%;
  height: 100%;
}

.layout {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;

  .layout-content {
    flex: 1;
  }
}
</style>
